<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
    <TableList
      @give-pagination="changePage"
      :tableData="tableData"
      :total="total"
      :pagination="pagination"
    ></TableList>

    <!-- 顶部搜索栏 -->
    <SearchForm
      :search-data="pagination"
      @handle-search="handleSearch"
      @handle-clear="handleClear"
      @handle-reset="handleReset"
    ></SearchForm>
  </div>
</template>

<script setup lang="ts">
import { getProjectList, projectStatus } from '@/api/serve'
import { onMounted, ref } from 'vue'
import TableList from './components/TableList.vue'
import SearchForm from './components/SearchForm.vue'

const tableData = ref([])
const total = ref(0)

//分页搜索对象
const pagination = ref({
  pageSize: 10,
  pageNum: 1,
})

/* =======================方法定义 ======================== */
//分页查询护理项目数据
const changePage = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}

//生命周期
onMounted(() => {
  getList()
})

// 分页获取列表
const getList = async () => {
  const result = await getProjectList(pagination.value)
  if (result.code === 200) {
    tableData.value = result.data.records
    total.value = result.data.total
  }
}

// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}

const handleSearch = (val) => {
  getList()
}

const handleClear = (val) => {
  if (val == 'name') {
    delete pagination.value.name
  }
  if (val == 'status') {
    delete pagination.value.status
  }
  getList()
}

const handleReset = () => {
  delete pagination.value.name
  delete pagination.value.status
  getList()
}
</script>
